<template>
  <ion-page>
    <ion-header class="ion-no-border">
      <ion-toolbar>
        <ion-title>我的书架</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content :fullscreen="true">
<!--      <ion-grid>
        <ion-row>
          <ion-col size="6" :key="photo" v-for="photo in photos">
            <ion-img :src="photo.webviewPath"></ion-img>
          </ion-col>
        </ion-row>
      </ion-grid>
      <ion-fab vertical="bottom" horizontal="center" slot="fixed">
        <ion-fab-button @click="takePhoto()">
          <ion-icon :icon="camera"></ion-icon>
        </ion-fab-button>
      </ion-fab>-->
      <ion-card>
        <ion-card-header style="font-size: large;font-weight: bolder">
          总借阅量：8册
        </ion-card-header>
        <ion-card-content>
          <ion-row>
            <ion-col class="ion-align-items-center d-f f-d-c" size="4" :key="index" v-for="(item,index) of data2">
              <img :src="item.img">
              <div style="font-size: small">{{item.name}}</div>
            </ion-col>
          </ion-row>
        </ion-card-content>
      </ion-card>
    </ion-content>
  </ion-page>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { camera, trash, close } from 'ionicons/icons';
import { usePhotoGallery } from '@/composables/usePhotoGallery';
import {
  IonPage,
  IonHeader,
  IonFab,
  IonCard,
  IonCardContent,
  IonCardHeader,
  IonFabButton,
  IonIcon,
  IonToolbar,
  IonTitle,
  IonContent,
  IonGrid,
  IonRow,
  IonCol,
  IonImg,
} from '@ionic/vue';
export default defineComponent({
  name: 'Tab2Page',
  components: {
    IonPage,
    IonHeader,
    IonFab,
    IonCard,
    IonCardContent,
    IonCardHeader,
    IonFabButton,
    IonIcon,
    IonToolbar,
    IonTitle,
    IonContent,
    IonGrid,
    IonRow,
    IonCol,
    IonImg,
  },
  setup() {
    const { takePhoto,photos } = usePhotoGallery();
    return {
      takePhoto,
      photos,
      camera, trash, close
    }
  },
  data() {
    return {
      data2:[
        {
          name:'魔兽战神',
          img:require('../../public/assets/images/9.jpg')
        },
        {
          name:'笑面难为',
          img:require('../../public/assets/images/10.jpg')
        },
        {
          name:'狂人日记',
          img:require('../../public/assets/images/11.jpg')
        },
        {
          name:'文学是什么',
          img:require('../../public/assets/images/13.jpg')
        },
        {
          name:'Python入门',
          img:require('../../public/assets/images/6.jpg')
        },
        {
          name:'程序员数学',
          img:require('../../public/assets/images/7.jpg')
        },
        {
          name:'边城',
          img:require('../../public/assets/images/12.jpg')
        },
        {
          name:'漫画Python',
          img:require('../../public/assets/images/8.jpg')
        }
      ],
    }
  },
});
</script>
<style lang="less" scoped>
ion-content{
  --background: #f5f6f9;
}
</style>
